<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { navigateTo, uploadFile } from '@uni-helper/uni-promises'
import { get } from 'lodash-es'
import area from '../../../constant/china'
import cardDefault from '../../assets/image/bank-card/yhk.png'
import globalVariable from '../../../utils/globalVariable'
import user from '@/composables/user'
import { insertBankCardNo } from '@/api/user/index'

interface FormData {
    userName: string
    bankCardNo: string
    openBankAddress: string
    openBankBranch: string
    openBankCity: string
    bankCardImg: string
}

interface ExtraDataDto {
    isCollectBankCardImg: number | string
    isCollectOpenBankAddress: number | string
    isCollectOpenBankCity: number | string
    isCollectOpenBankName: number | string
}
const formData = ref<FormData>({} as FormData)

const eventChannel = ref()

const extraData = ref<ExtraDataDto>({} as ExtraDataDto)

function onToBankList() {
    navigateTo({
        url: '/package-mine/pages/bank-list/bank-list',
    })
}

async function toCamera() {
    const eventChannel = await navigateTo({
        url: '/package-mine/pages/camera/camera?hint=请拍摄银行卡卡号面',
        events: {
            async base64(data: {
                base64: string
                tempPath?: string
            }) {
                const res = await uploadFile({
                    name: 'file',
                    fileType: 'image',
                    formData: {
                        user: 'test',
                    },
                    filePath: data.tempPath,
                    url: `${globalVariable.baseUrl}/api/v1/blue/user/upload`,
                    // 请求头一定要加，否则 iOS 图片上传会失败
                    header: {
                        'content-type': 'multipart/form-data',
                    },
                })
                formData.value.bankCardImg = JSON.parse(res.data).data.fileUrl
            },
        },
    })

    console.log(999, eventChannel.eventChannel)

    // uni.navigateTo({
    //     url: '/package-mine/pages/camera/camera?hint=请拍摄银行卡卡号面',
    //     events: {
    //         base64(data: {
    //             base64: string
    //             tempPath?: string
    //         }) {
    //             uni.uploadFile({
    //                 name: 'file',
    //                 fileType: 'image',
    //                 formData: {
    //                     user: 'test',
    //                 },
    //                 filePath: data.tempPath,
    //                 url: `${globalVariable.baseUrl}/api/v1/blue/user/upload`,
    //                 // 请求头一定要加，否则 iOS 图片上传会失败
    //                 header: {
    //                     'content-type': 'multipart/form-data',
    //                 },
    //                 success: (res) => {
    //                     formData.value.bankCardImg = JSON.parse(res.data).data.fileUrl
    //                 },
    //                 fail: (error) => {
    //                     console.error('上传失败: ', JSON.stringify(error))
    //                 },
    //             })
    //         },
    //     },
    // })
}
function onCholseArea() {
    // #ifdef MP-ALIPAY
    my.multiLevelSelect({
        title: '请选择开户城市',
        list: area,
        success: (res) => {
            formData.value.openBankCity = `${res.result[0].name},${res.result[1].name}`
        },
    })
    // #endif
}

async function onEditInsertBankCardNo() {
    await insertBankCardNo({
        userName: formData.value.userName,
        bankCardNo: formData.value.bankCardNo,
        openBankAddress: formData.value.openBankAddress,
        openBankBranch: formData.value.openBankBranch,
        openBankCity: formData.value.openBankCity,
        bankCardImg: formData.value.bankCardImg,
        openBankName: formData.value.openBankAddress,
    })
    uni.showToast({
        title: '修改成功',
        icon: 'none',
    })
    await user.login()
    uni.navigateBack()
}
onLoad(async () => {
    const instance = getCurrentInstance()
    eventChannel.value = get(instance, 'proxy.getOpenerEventChannel', new Function()).call(instance?.proxy)
    eventChannel.value.on('extraData', (data: AnyObject) => {
        extraData.value = data?.extraData || {}
    })
    await user.waitLogin()
    formData.value.userName = user.userInfo.value.userName
    formData.value.bankCardNo = user.userInfo.value.bankCardNo
    formData.value.openBankBranch = user.userInfo.value.openBankBranch
    formData.value.openBankCity = user.userInfo.value.openBankCity
    formData.value.openBankAddress = user.userInfo.value.openBankName
    formData.value.bankCardImg = user.userInfo.value.bankCardImg
})
onShow(() => {
    uni.$on('updateData', (data: string) => {
        formData.value.openBankAddress = data
    })
})
</script>

<template>
    <NavbarContainer nav-title="银行卡号">
        <view class="box-border px-30rpx">
            <view class="mt-40rpx text-42rpx font-bold">
                提交银行卡
            </view>
            <view class="mt-15rpx text-xs text-gray">
                应该劳务公司要求，请您输入银行卡信息后领薪水
            </view>
            <view v-if="extraData.isCollectBankCardImg">
                <view class="mt-40rpx text-lg">
                    上传银行卡照片
                </view>
                <view class="mt-32rpx flex items-center justify-center">
                    <img class="h-365rpx w-556rpx"
                         :src="formData.bankCardImg === null || formData.bankCardImg === '' ? cardDefault : formData.bankCardImg"
                         alt="widthFix" @click="toCamera">
                </view>
            </view>
            <view>
                <uni-forms :model-value="formData" :border="true" err-show-type="toast">
                    <uni-forms-item label-width="100px" label="开户姓名" name="name">
                        <input v-model="formData.userName" class="w-full border-none bg-transparent" type="text" placeholder="请输入开户姓名">
                    </uni-forms-item>
                    <uni-forms-item label-width="100px" label="银行卡号" name="name">
                        <input v-model="formData.bankCardNo" class="w-full border-none bg-transparent" type="text" placeholder="请输入银行卡号">
                    </uni-forms-item>
                    <uni-forms-item v-if="extraData.isCollectOpenBankName" label-width="100px" label="开户银行" name="name">
                        <view class="box-border h-full flex items-center px-10rpx py-4rpx text-30rpx"
                              @click="onToBankList">
                            {{ formData.openBankAddress ? formData.openBankAddress : '请选择开户银行' }}
                        </view>
                    </uni-forms-item>
                    <uni-forms-item v-if="extraData.isCollectOpenBankName" label-width="100px" label="开户行支行"
                                    name="name">
                        <input v-model="formData.openBankBranch" class="w-full border-none bg-transparent" type="text"
                               placeholder="请输入支行名称，如XX支行">
                    </uni-forms-item>
                    <uni-forms-item v-if="extraData.isCollectOpenBankCity" label-width="100px" label="开户城市" name="name">
                        <view class="box-border h-full flex items-center px-10rpx py-4rpx text-30rpx"
                              @click="onCholseArea">
                            {{ formData.openBankCity ? formData.openBankCity : '请选择开户城市' }}
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
            <!-- <button v-if="true" class="submit long-btn" bindtap="onInsertBankCardNo">下一步</button> -->
            <button class="long-btn submit" @click="onEditInsertBankCardNo">
                确认并修改
            </button>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.long-btn {
    width: 670rpx;
    height: 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3e5ff5;
    border-radius: 47px;
    font-size: 36rpx;
    color: white;
    margin-top: 60rpx;
    font-weight: 400;
    box-shadow: unset !important;
}
</style>

<route lang="json">
{
    "layout": "default"
}
</route>
